<template>
  <div>
    <el-dialog
      width="800px"
      :title="$t('剩余库位数量')"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <div class="print-area" id="PrintSpNoLeftNumber">
        <div class="print-header">
          包裹号: <b>{{ formData.packageNo }}</b>
        </div>
        <div class="package-list" v-if="serList.length">
          <div class="package-list-item" v-for="(item, index) in serList" :key="index">
            <div v-for="(i, idx) in item" :key="idx" class="_item">
              <div>
                <b>{{ i.spNo }}</b>
              </div>
              <div v-if="i.num">
                数量: <b>{{ i.num }}</b>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" v-print="'#PrintSpNoLeftNumber'">{{ $t('打印') }}</el-button>
        <el-button @click="cancel">{{ $t('关闭') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Print from 'vue-print-nb'

export default {
  name: 'PrintSpNoLeftNumber',
  directives: {
    Print,
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      serList: [],
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.handleSerList()
      }
    },
  },

  methods: {
    handleSerList() {
      let targetList = []
      const rowNum = 4
      let serList = this.formData.serList
      // let serList = Array(15).fill({ spNo: '', num: '' })
      if (serList.length == 0) targetList = []
      if (serList.length < rowNum) {
        targetList = [serList.concat(Array(rowNum - serList.length).fill({ spNo: '', num: '' }))]
      } else {
        // 判断serList的长度是否是 rowNum 的整数倍
        const rest = serList.length % rowNum
        if (rest != 0) {
          const restArr = Array(rowNum - rest).fill({ spNo: '', num: '' })
          serList = serList.concat(restArr)
        }
        for (let index = rowNum; index <= serList.length; index += rowNum) {
          const group = serList.slice(index - rowNum, index)
          targetList.push(group)
        }
      }

      this.serList = targetList
      console.log(` this.serList ==>`, JSON.parse(JSON.stringify(this.serList)))
    },
    getList() {},

    handleSubmit() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
        }
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
.print-area {
  @media print {
    @page {
      size: landscape;
      size: portrait;
    }
  }
  $border: 1.5px solid #616161cc;
  .print-header {
    padding: 15px;
    border: $border;
  }
  .package-list {
    border: $border;
    margin-top: 5px;
    font-size: 13px;
    &-item {
      display: flex;
      height: 15px;
      &:not(:last-child) {
        border-bottom: $border;
      }
      ._item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        &:not(:last-child) {
          border-right: $border;
        }
        div {
          text-align: center;
          height: 100%;
          &:nth-child(1) {
            flex: 5;
            border-right: $border;
          }
          &:nth-child(2) {
            flex: 3;
          }
        }
      }
    }
  }
}
</style>
